<template>
  <div class="help-navigation">
    <n-space justify="center" align="center" wrap>
      <n-button 
        :type="currentRoute === '/help' ? 'primary' : 'default'" 
        @click="navigateTo('/help')"
      >
        <template #icon><n-icon><Home /></n-icon></template>
        帮助中心
      </n-button>
      
      <n-button 
        :type="currentRoute === '/tutorials' ? 'primary' : 'default'" 
        @click="navigateTo('/tutorials')"
      >
        <template #icon><n-icon><Book /></n-icon></template>
        教程中心
      </n-button>
      
      <n-button 
        :type="currentRoute === '/faq' ? 'primary' : 'default'" 
        @click="navigateTo('/faq')"
      >
        <template #icon><n-icon><HelpCircle /></n-icon></template>
        常见问题
      </n-button>
      
      <n-button 
        :type="currentRoute === '/feedback' ? 'primary' : 'default'" 
        @click="navigateTo('/feedback')"
      >
        <template #icon><n-icon><ChatbubbleEllipses /></n-icon></template>
        反馈与支持
      </n-button>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { NButton, NIcon, NSpace } from 'naive-ui'
import { 
  Home,
  Book,
  HelpCircle,
  ChatbubbleEllipses
} from '@vicons/ionicons5'

const router = useRouter()
const route = useRoute()

// 当前路由路径
const currentRoute = computed(() => {
  return route.path
})

// 导航到指定路径
const navigateTo = (path: string) => {
  if (currentRoute.value !== path) {
    router.push(path)
  }
}
</script>

<style lang="scss" scoped>
.help-navigation {
  margin-bottom: 20px;
  padding: 12px;
  background-color: var(--card-color);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .help-navigation {
    :deep(.n-button) {
      margin-bottom: 8px;
    }
  }
}
</style> 